<template>
  <div id="app" class="appContent">
    <!-- 导航栏 -->
    <header id="header" class="mui-bar mui-bar-nav">
      <a
        v-if="showBack"
        @click="goback"
        class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"
      ></a>
      <h1 class="mui-title">爱安师-爱生活</h1>
    </header>
    <!-- 内容区 -->
    <div class="mui-content">
       <transition>
      <keep-alive include="newslist imagelist">
          <router-view></router-view>
      </keep-alive>
      </transition>
    </div>
    <!-- 底部footer -->
    <div class="footer">
      <nav class="mui-bar mui-bar-tab">
        <router-link to="/home" class="mui-tab-item" href="#tabbar">
          <!-- <span class="mui-icon mui-icon-extra mui-icon-extra-class"></span> -->
          <span class="mui-icon mui-icon-home-filled"></span>
          <span class="mui-tab-label">首页</span>
        </router-link>
        <router-link
          to="/classes"
          class="mui-tab-item"
          href="#tabbar-with-chat"
        >
          <span class="mui-icon mui-icon-email"></span>
          <!-- <span class="mui-icon-extra mui-icon-extra-class"></span> -->
          <span class="mui-tab-label">分类</span>
        </router-link>
        <router-link
          to="/find"
          class="mui-tab-item"
          href="#tabbar-with-contact"
        >
          <span class="mui-icon mui-icon-contact"></span>
          <span class="mui-tab-label">发现</span>
        </router-link>
        <router-link to="/cart" class="mui-tab-item" href="#tabbar-with-map">
          <span class="mui-icon mui-icon-extra mui-icon-extra-cart"
            ><span class="mui-badge">{{
              this.$store.getters.getTotalCount
            }}</span></span
          >
          <span class="mui-tab-label">购物车</span>
        </router-link>
        <router-link to="/user" class="mui-tab-item" href="#tabbar-with-map">
          <span class="mui-icon mui-icon-extra mui-icon-extra-peoples"></span>
          <span class="mui-tab-label">我的</span>
        </router-link>
      </nav>
    </div>
  </div>
</template>

<script>
//import 'animate.css'
export default {
  data() {
    return {
      showBack: false, //是否显示回退按钮
    };
  },
  methods: {
    goback: function () {
      this.$router.go(-1); //向后回头1个路由
    },
  },
  created() {
    //$.route.path,获取当前路径的路由
    if (this.$route.path == "/home") {
      this.showBack = false;
    } else {
      this.showBack = true;
    }
  },
  watch: {
    //监听路由，如果路由是/home，showBack=false
    "$route.path": function (newValue) {
      if (newValue == "/home") {
        this.showBack = false;
      } else {
        this.showBack = true;
      }
    },
  },
};
</script>
 


<style lang="less">
.appContent {
  height: 100%;
  .mui-bar-nav {
    .mui-icon-left-nav {
      color: rgb(228, 220, 220);
    }
    background-color: red;
    h1 {
      color: aliceblue;
      font-weight: bold;
    }
  }
  .footer {
    .mui-bar-tab {
      .mui-active {
        color: rgb(245, 11, 11);
      }
    }
  }
  padding-bottom: 50px;
}
// .fade-enter,
// .fade-leave-to {
//   opacity: 0;
//   transform: translateX(-100px);
// }

// .fade-enter-active,
// .fade-leave-active {
//   transition: all 1s ease;
//   position: absolute;
// }
// .v-enter,.v-leave-to{
//    opacity :0;
//    transform: translateX(-80px);
   
// }
  //  .v-leave-to{
  //    opacity :0;
  //  transform: translateX(-80px);
  //  position: absolute;
  //  }
  // .v-enter-active{
  //   transition:  0.6s ease;
  //   position: absolute;
  // }
  // .v-leave-active .v-enter-active{
  //   transition:  1s ease;
  //   position: absolute;
  // }
  // .animate__animated{
  //   animate-duration: 0s;
  //   animate-delay: 0s;
  // }
  .mui-content {
    height: 100%;
    overflow: hidden;
  }
   .v-enter {
    transform: translate(400px);
  }
  .v-leave-to {
    position: absolute;
    transform: translate(-400px);
    }
  .v-enter-active,
  .v-leave-active {
    transition: all 0.5s;
  }

</style>
